<template>
	<view class="container box">
		<u-sticky>
			<view class="tabs">
				<view class="left">
					<view :class="['tabs-item', { current: current == 2 }]" @click="toggle(2)">推广收益</view>
					<view :class="['tabs-item', { current: current == 3 }]" @click="toggle(3)">广告收益</view>
					<view :class="['tabs-item', { current: current == 4 }]" @click="toggle(4)">激活收益</view>
				</view>
				<view class="right">
					<view class="tabs-item">
						<view class="date">{{ currentDateText }}</view>
						<picker class="date2" mode="date" fields="month" :start="startDate" :end="endDate" :value="currentDate" @change="selectDate">
							<view style="opacity: 0">当前选择</view>
						</picker>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="layout" v-if="state.list.length">
			<view class="list-warp" v-if="current == 2 || current == 4">
				<view class="list-item" v-for="(item, index) in state.list" :key="index">
					<view class="left">
						<view class="headpic">
							<image class="pic" :src="item.avatar_url"></image>
						</view>
						<view class="info">
							<view class="label">
								<text class="h4">{{ item.nickname }}</text>
								<text class="tag">已开通</text>
							</view>
							<view class="mobile">{{ item.tel }}</view>
						</view>
					</view>
					<view class="right">
						<view class="money">+¥ {{ item.price }}</view>
						<view class="time">{{ item.created_at }}</view>
					</view>
				</view>
			</view>
			<block v-if="current == 3">
				<view class="block-item">
					<view class="table">
						<view class="thead">
							<view class="th">设备ID</view>
							<view class="th">广告条数</view>
							<view class="th">广告总价值</view>
						</view>
						<view class="tbody">
							<view class="tr" v-for="(item, index) in state.list" :key="index">
								<view class="td one">{{ item.imei }}</view>
								<view class="td tow">{{ item.total }}</view>
								<view class="td three">￥{{ item.price }}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="empty" style="height: 80%" v-else>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { get } from '@/request/index.js';
import { dayjs } from '@/static/dayjs.min.js';

onLoad(() => {
	getListData();
});
onReachBottom(() => {
	state.page++;
	if (state.page > state.totalPage) return uni.showToast({ title: '我也是有底线的 ~' });
	getListData();
});
const state = reactive({
	list: [],
	page: 1,
	totalPage: 1
});
const getListData = async () => {
	uni.showLoading({
		title: '数据请求中···'
	});
	const res = await get('agent/center/price_list', { type: current.value, time: currentDate.value });
	const { code, data } = res;
	if (code == 200) {
		state.list = data.list.data;
		state.totalPage = data.list.last_page;
	}
	uni.hideLoading();
};

//tabs切换
let current = ref(2);
const toggle = (n) => {
	current.value = n;
	state.page = 1;
	getListData();
};
let startDate = ref('2025-01');
let endDate = ref(dayjs().format('YYYY-MM'));
let currentDate = ref(dayjs().format('YYYY-MM'));
const selectDate = (e) => {
	const { value } = e.detail;
	currentDate.value = value;
	state.page = 1;
	getListData();
};
const currentDateText = computed(() => {
	return dayjs(currentDate.value).format('YY年M月');
});
</script>
